<template>
	<view>
		<view class="page">
			<view class="page__hd">
				<view class="page__desc">搜索栏</view>
			</view>
			<view class="page__bd">
				<input />
			</view>
		</view>
		<view v-for="(item,index) in number" :key="index">
			<view>
				<p>{{item.name}}</p>
			</view>
			<view class="img">
				<view class="img_dt" v-for="item in item.err"  :key="err.name">
					<view class="img_box" v-if="item.manx == false ">
						<image class="img_hd"></image>
						<view class="img_text">{{item.name2}}</view>
					</view>
					<view class="img_box2" v-else>
						<image class="img_hd"></image>
						<view class="img_text2">{{item.name2}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number:[
					{
					name:'热门品牌',
					err:[
						{
						name2:'宝马',manx:false,
					},
					{
						name2:'奥迪',manx:false,
					},
					{
						name2:'宝马',manx:false,
					},
					{
						name2:'宝马',manx:false,
					},
					{
						name2:'宝马',manx:false,
					},
					{
						name2:'宝马',manx:false,
					},
					{
						name2:'宝马',manx:false,
					},
					{
						name2:'宝马',manx:false,
					},
					{
						name2:'宝马',manx:false,
					},
					{
						name2:'宝马',manx:false,
					},
					]
				},
				{
					name:'A',
					err:[
						{
						name2:'奥迪',
					},
					{
						name2:'阿尔法',
					},
					]
				},
				{
					name:'B',
					err:[
						{
						name2:'奥迪',
					},
					{
						name2:'阿尔法',
					},
					]
				},
				{
					name:'C',
					err:[
						{
						name2:'奥迪',
					},
					{
						name2:'阿尔法',
					},
					]
				},
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.page__bd {
		width: 618rpx;
		height: 60rpx;
		background-color: #f9f9f9;
		border-radius: 36rpx;
	}

	.img {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding: 20rpx;
	}

	.img_box {
		width: 72rpx;
		height: 116rpx;
		border: 1rpx solid #2C405A;
		margin: 24rpx;
		
		text-align: center;
	}
	.img_box2 {
		height: 72rpx;
		border: 1rpx solid #2C405A;
		margin: 24rpx;
		display: flex;
	}

	.img_hd {
		width: 72rpx;
		height: 72rpx;
		border: 1rpx solid #4CD964;
	}

	.img_text {
		width: 48rpx;
		height: 34rpx;
		padding: 0 12rpx;
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: bold;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: #2c2c2c;
	}
	.img_text2{
		height: 34rpx;
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 72rpx;
		letter-spacing: 0rpx;
		padding-left: 20rpx;
		color: #2c2c2c;
	}
</style>
